<template>
    <div :class="classNmae">{{text}}</div>
</template>

<script>
export default {
    name: 'TopTip',
    props: {
        text: {
            type: String,
            default: '',
        },
        type: {
            type: String,
            default: 'normal', // normal danger
        },
        isCenter: {
            type: Boolean,
            default: false,
        },
        isFixed: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        classNmae() {
            const { isCenter, isFixed, type } = this.$props;
            return `tech-top-tip tip-type-${type} ${isCenter ? 'text-center' : ''} ${isFixed ? 'is-fixed' : ''}`;
        },
    },
};
</script>

<style lang="less">
.tech-top-tip {
    .font-size-sm();
    .p(@gap);
    .text-overflow();
    &.tip-type-normal {
        color: #8D6627;
        background-color: #FFFAED;
    }
    &.tip-type-danger {
        color: @red;
        background-color: #FFE2E2;
    }
    &.text-center {
        .t-c();
    }
    &.is-fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
}
</style>
